I am following a tutorial, and I copied the repo, Add for some reason, the static files will not load.
This is my folder structure involves having my templates file in my main app and my static files are outside this folder. In the main folder (Django-ecommerce) sitting where my main app is.
settings.py
import os
ENVIRONMENT = os.getenv('ENVIRONMENT', 'development')
DEBUG = False
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
SECRET_KEY = 'xxxx'
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
'crispy_forms',
'django_countries',
'core'
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware'
]
ROOT_URLCONF = 'demo.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
'templates'
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, '/static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
if ENVIRONMENT == 'production':
DEBUG = True
SECRET_KEY = os.getenv('SECRET_KEY')
SESSION_COOKIE_SECURE = True
SECURE_BROWSER_XSS_FILTER = True
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_SECONDS = 31536000
SECURE_REDIRECT_EXEMPT = []
SECURE_SSL_REDIRECT = True
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend'
)
SITE_ID = 1
LOGIN_REDIRECT_URL = '/'
# Provider specific settings
SOCIALACCOUNT_PROVIDERS = {
'google': {
# For each OAuth based provider, either add a ``SocialApp``
# (``socialaccount`` app) containing the required client
# credentials, or list them here:
'APP': {
'client_id': '123',
'secret': '456',
'key': '666'
}
}
}
CRISPY_TEMPLATE_PACK = 'bootstrap4
Header.html
{% load static %}
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png"
href="{% static 'images/icons/favicon.png' %}"
/>
<link rel="stylesheet" type="text/css"
href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}"
/>
<link rel="stylesheet" type="text/css"
href="{% static 'fonts/themify/themify-icons.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static 'fonts/Linearicons-Free-v1.0.0/icon-font.min.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static 'fonts/elegant-font/html-css/style.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/animate/animate.css' %}"
/>
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}"
/>
<!--===============================================================================================-->
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/animsition/css/animsition.min.css' %}"
/>
<!--===============================================================================================-->
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/select2/select2.min.css' %}"
/>
<!--===============================================================================================-->
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/daterangepicker/daterangepicker.css' %}"
/>
<!--===============================================================================================-->
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/slick/slick.css' %}"
/>
<!--===============================================================================================-->
<link
rel="stylesheet"
type="text/css"
href="{% static 'vendor/lightbox2/css/lightbox.min.css' %}"
/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
<!--===============================================================================================-->
</head>
And My base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}" />
{% include "header.html" %}
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %} {% endblock %}
<style type="text/css">
.form-control {
display: block;
width: 100%;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da !important;
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
</style>
<body class="animsition">
{% include "nav.html"%}
<div class="mt-2">
{% if messages %} {% for message in messages %}
<div
class="alert alert-{{ message.tags }} alert-dismissible fade show"
role="alert"
>
{{ message }}
<button
type="button"
class="close"
data-dismiss="alert"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
</div>
{% endfor %}
{% endif %}
{% block content %}
\
{% endblock content %}
{% block extra_body %}
{% endblock %}
{% include "footer.html"%}
{% include "script.html"%}
{% block extra_scripts %}
{% endblock extra_scripts %}
</body>
</html>
I tried moving my static folder into my main app folder but it still does not work.